function Tab(sel,index=0) {
	
	this.index = index;
	this.el = document.querySelector(sel);
	console.log(this)
	
	//1.给nav里的按钮添加点击事件
	this.oUl = this.el.querySelector('#navUl');
	this.oLis = this.oUl.getElementsByTagName('li')
	//所有的box
	this.boxs = this.el.querySelectorAll('.box')
	
	//给按钮添加点击事件
	this.btnsEvent = function() {
		let that = this;
		for (let i = 0; i < this.oLis.length; i++) { //这个this指的是tab对象
		
			//2.点击的按钮改变样式
			this.oLis[i].onclick = function() {
				
				that.selectedBtnIndex(i)
				that.selectedBoxIndex(i)
			}
		}
		
		console.log(this.index)
		this.selectedBtnIndex(this.index)
		this.selectedBoxIndex(this.index)
		
		
	}
	//根据index显示对应的box
	this.selectedBoxIndex = function(index){
		var box = this.boxs[index];//按钮对应的div
		
		//先让所有的box隐藏
		for (var j = 0; j < this.oLis.length; j++) {
			this.boxs[j].style.display = 'none'
		}
		box.style.display = 'block'
	}
	
	// 根据下标让对应的按钮被选中
	this.selectedBtnIndex = function(index){
		for (var j = 0; j < this.oLis.length; j++) {
			this.oLis[j].className = ''
		}
		this.oLis[index].className = 'active'
	}
	
	this.btnsEvent()

}












/* 
function Tab() {
	console.log(this)

	//1.给nav里的按钮添加点击事件
	this.oUl = document.querySelector('#navUl')

	this.oLis = this.oUl.getElementsByTagName('li')
	this.boxs = document.querySelectorAll('.box')


	this.btnEvent = function() {

		let that = this;
		for (let i = 0; i < this.oLis.length; i++) { //这个this指的是tab对象

			// oLis[i].index = i; //标记自己是第几个
			// oLis[i].setAttribute('myindex', i) //增加class名 myindex,值为i

			// console.log(oLis[i])
			//2.点击的按钮改变样式
			this.oLis[i].onclick = function() {

				//	console.log(i)
				//	console.log(oLis[i]) //=>console.log(this)
				//	console.log(boxs[i]) //点击的按钮对应的box

				var box = that.boxs[i]

				for (var j = 0; j < that.oLis.length; j++) {
					that.oLis[j].className = ''
					// oLis[j].classList.remove('active')

					that.boxs[j].style.display = 'none'
				}

				this.className = 'active';
				// this.classList.add('active')

				that.boxs[i].style.display = 'block'

			}
		}
	}

	this.btnEvent()

} 
 */